<template>
  <div id="layout">
    <header id="header">
      <headnav />
    </header>
    <main
      id="main"
    >
      <router-view />
    </main>
  </div>
</template>

<script>
import headnav from '../components/headnav.vue'
export default {
  name:'Home',
  // eslint-disable-next-line vue/no-unused-components
  components:{ headnav },
  methods: {
    change() {
      console.log('111')
    }
  }
}
</script>

<style lang="scss" scoped>
#layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#header {
    height: 100px;
    box-shadow: 2px 5px 5px 0px rgba(102,102,102,0.5);
    background-color: #ffff;
    // background: aqua;
    flex-shrink: 0;
}

#footer {
    height: 50px;
    background: coral;
    flex-shrink: 0;
}

#main {
    flex-grow: 2;
    // background: cornflowerblue;
    overflow-y: auto;
}


</style>

